<style>body{background: #f6f6f6;} .content-td{padding: 0 !important;} .creatAccountTitle[data-v-14ca4ede] {font-size: .8em;} label[data-v-14ca4ede]{font-size: .8em;}</style>
<div class="wapper" id="lowerAccount">
	<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center tops" style="color:white;background: #059BF3;height: 50px;line-height:50px;position: fixed;margin-top: 0px;left: 0px;z-index: 100;padding-left:0;padding-right:0;">
		<a  class="glyphicon glyphicon-chevron-left fl" onclick="backPage()" style="cursor:pointer; color: white;position:absolute;top:50%;transform:translateY(-50%);font-size: 20px;left:10px;"></a>
		<ul>
			<li class="lowerCount on">
				<a>下级开户</a>
			</li>
			<li class="yaoqingCode">
				<a>邀请码</a>
			</li>
		</ul>
	</div>
	
	<div data-v-6d28c302="" class="col-xs-12 col-sm-4 col-sm-offset-4 main createCode child-view" style="padding-bottom: 0px;" s="[object Object]">
		<div class="switch">
			<ul>
				<li class="invitationCode active" >生成邀请码</li>
				<li class="openAccount">下级开户</li>
			</ul>
		</div>
			<div class="invitationContent">
				 <div data-v-6d28c302="" class="creatAccountTitle radio">
					开户类型
					<label data-v-6d28c302="" class="choosed" data-type="1">代理类型</label> <label data-v-6d28c302="" class="" data-type="0">玩家类型</label>
				</div>
				<div data-v-6d28c302="" class="tabLI">
					<div class="gundong1">
						<div class="circle_bg"><img src="/img/agent/dollars.png" /></div>
						<div class="seradediv">当前返点：<span></span></div>
						<div class="User_grade" id="runway">
							<div class="el-slider">
								<div class="el-slider__runway">
									<div class="el-slider__bar" style="left: 0%; width: 0%;" ></div>
									<div class="el-slider__button-wrapper" id="drag" >
										<div class="el-slider__button el-tooltip"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<a data-v-6d28c302="" class="BTN submitBtn">确认</a>
					<div data-v-6d28c302="" style="height: 0.5em;"></div>
				</div> 
			</div>
			
			<div class="openAccountContent hide">
				<div data-v-6d28c302="" class="creatAccountTitle radio">
					开户类型
					<label data-v-6d28c302="" class="choosed" data-type="1">代理类型</label> <label data-v-6d28c302="" class="" data-type="0">玩家类型</label>
				</div>
			
				<div class="message">
					<p><span>姓名：</span><input class="userName" placeholder="请输入用户名" /></p>
					<p><span>密码：</span><input class="userPwd" type="password" placeholder="请输入密码" /></p>
				</div>
				
				<div data-v-6d28c302="" class="tabLI">
					<div class="gundong1">
						<div class="circle_bg"><img src="/img/agent/dollars.png" /></div>
						<div class="seradediv">当前返点：<span></span></div>
						<div class="User_grade" id="runway1">
							<div class="el-slider">
								<div class="el-slider__runway">
									<div class="el-slider__bar" style="left: 0%; width: 0%;" ></div>
									<div class="el-slider__button-wrapper" id="drag1" >
										<div class="el-slider__button el-tooltip"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<a data-v-6d28c302="" class="BTN submitBtn">确认</a>
					<div data-v-6d28c302="" style="height: 0.5em;"></div>
				</div> 
			</div>
		</div>
	<div data-v-14ca4ede="" class="main creatAccount child-view hide" style="padding-bottom: 0px;" s="[object Object]">
		<div data-v-14ca4ede="" class="creatAccountTitle radio">
			开户类型
			<a data-v-14ca4ede=""  class="types router-link-exact-active"><input data-v-14ca4ede="" type="radio" value="1" id="radio1"> <label data-v-14ca4ede="" for="radio1">代理类型</label></a>
			<a data-v-14ca4ede=""  class="types"><input data-v-14ca4ede="" type="radio" value="0" id="radio2"> <label data-v-14ca4ede="" for="radio2">玩家类型</label></a>
		</div>
		<div data-v-410b8516="" data-v-14ca4ede="" class="_div">
			<div data-v-410b8516="" id="TouchScroll" class="tabLI">
				<div data-v-410b8516="" data-key="false" class="InviteTableBox">
					<table class="class-tableDataTable class-table-needClick display table table-striped table-bordered table-hover" id="yqmCode">
						<thead style="display:none;">
							<tr>
								<th>内容<th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	 $(".foot").hide();
	 var allRobate;
	 var allRobate1;
	 var gradeWidth=$("#runway").offset().left;
	 var runwayWidth=$("#runway").width();
	 var gradeWidth1=$("#runway1").offset().left;
	 var runwayWidth1=$("#runway1").width();
	userRobate(".invitationContent");
	/* 那当当前用户的最大赔率 */
	function userRobate(page){
		$.ajax({
			url:"/agencyCenter/highest.do", 
			type: "post",
			data:{},
			success:function(data){
				if(data == 50) { 
					save.push("sy");
					bindSetData("login"); 
					return;
	   			}else if(data==60){
	   				pagePreserve();
	   				return;
	   			}
				var newData=data.data;
				newData=Number(newData.substring(0,newData.length-1)).toFixed(1);
				$(page+" .seradediv span").text(newData+"%");
				$(".el-slider__button-wrapper").css("left","0px");
				if(page==".invitationContent"){
				 	allRobate=newData;
				 	gradeWidth=$("#runway").offset().left;
				 	runwayWidth=$("#runway").width();
				}else if(page==".openAccountContent"){
					allRobate1=newData;
					gradeWidth1=$("#runway1").offset().left;
					runwayWidth1=$("#runway1").width();
				}
			},
		});
	};
	
	/* 生成邀请码和下级开户的切换 */
	$(".switch li").on("click",function(){
		$(this).addClass("active");
		$(this).siblings().removeClass("active");
		if($(this).hasClass("invitationCode")){
			userRobate(".invitationContent");
			$(".invitationContent").removeClass("hide");
			$(".openAccountContent").addClass("hide");
		}else{
			userRobate(".openAccountContent");
			$(".invitationContent").addClass("hide");
			$(".openAccountContent").removeClass("hide");
		}
	});
	
	
	/* 下级开户下点击切换开户类型 */
	$(".createCode label").on("click",function(){
		$(this).addClass("choosed");
		$(this).siblings().removeClass("choosed");
		
	});
	
	/* 顶部下级开户和邀请码切换 */
	$(".tops li").on("click",function(){
		$(this).addClass("on");
		$(this).siblings().removeClass("on");
		if($(this).hasClass("lowerCount")){
			$(".createCode").removeClass("hide");
			$(".creatAccount").addClass("hide");
		}else{
			$(".createCode").addClass("hide");
			$(".creatAccount").removeClass("hide");
			var type=$(".router-link-exact-active input").val();
			 $("#yqmCode").DataTable().destroy();
			invitationType(type)
		}
	});
	     var div1 = document.getElementById("runway");
	     var div2 = document.getElementById("drag");
	     div2.addEventListener('touchmove', function(event) {
	         event.preventDefault();
	         var styles = window.getComputedStyle(div1,null);
	         var width=styles.width;/*块最大滑动的距离*/
	         var widths=parseInt(width);
	         if (event.targetTouches.length == 1) {
	             var touch = event.targetTouches[0];
	             /*moveleft为滑动的距离*/
	             moveleft = touch.pageX-gradeWidth;
	             if(moveleft<=0){/*left值最小是0；*/
	                 moveleft=0;	
	             };
	             if(moveleft>=parseInt(width)){
	                 moveleft=parseInt(width);
	             }
	             div2.style.left=moveleft+"px";/*最后把left值附上。*/
	             var robate=$(".invitationContent .seradediv span").text();
	             robate=Number(robate.substring(0,robate.length-1));
	             var percentage=((widths-moveleft)/widths);
	             robate=percentage*allRobate;
	             robate=robate.toFixed(1);
	             $(".invitationContent .seradediv span").text(robate+"%");
	            
	         };
	     });
	     
	     
	     var div3 = document.getElementById("runway1");
	     var div4 = document.getElementById("drag1");
	     div4.addEventListener('touchmove', function(event) {
	         event.preventDefault();
	         var styles = window.getComputedStyle(div3,null);
	         var width=styles.width;/*块最大滑动的距离*/
	         var widths=parseInt(width);
	         if (event.targetTouches.length == 1) {
	             var touch = event.targetTouches[0];
	             /*moveleft为滑动的距离*/
	             moveleft = touch.pageX-gradeWidth;
	             if(moveleft<=0){/*left值最小是0；*/
	                 moveleft=0;	
	             };
	             if(moveleft>=parseInt(width)){
	                 moveleft=parseInt(width);
	             }
	             div4.style.left=moveleft+"px";/*最后把left值附上。*/
	             var robate=$(".openAccountContent .seradediv span").text();
	             robate=Number(robate.substring(0,robate.length-1));
	             var percentage=((widths-moveleft)/widths);
	             robate=percentage*allRobate1;
	             robate=robate.toFixed(1);
	             $(".openAccountContent .seradediv span").text(robate+"%");
	         };
	     });
		
	     /* 邀请码下切换开户类型 */
	     /* var isClick=true; */
		$(".creatAccount .creatAccountTitle .types").on("click",function(){
			/* if(isClick){
				isClick=false; */
				$(this).addClass("router-link-exact-active");
				$(this).siblings().removeClass("router-link-exact-active");
				 var type=$(".router-link-exact-active input").val();
				 $("#yqmCode").DataTable().destroy();
		 		 invitationType(type);
			/* } */
		});
		
		/* 点击生成邀请码 */
		$(".invitationContent .submitBtn").on("click",function(){
			var type=$(".invitationContent .choosed").attr("data-type");
			var robate=$(".invitationContent .seradediv span").text();
			$.ajax({
				url:"/agencyCenter/insertProxyLinks.do", 
				type: "post",
				data:{
					odds:robate,
					gamePlayer:type,
				},
				success:function(data){
					if(data == 50) { 
						save.push("sy");
						bindSetData("login"); 
						return;
		   			}else if(data==60){
		   				pagePreserve();
		   				return;
		   			}
					if(data.data==1){
						layer.confirm('生成成功，是否查看？', {
				            btn : [ '确定', '取消' ]
				        }, function(index) {
				            layer.close(index);
				            $(".lowerCount").removeClass("on");
				            $(".yaoqingCode").addClass("on");
				            $(".createCode").addClass("hide");
							$(".creatAccount").removeClass("hide");
							if(type==0){
								$("#radio2").parent().addClass("router-link-exact-active");
								$("#radio1").parent().removeClass("router-link-exact-active");
							}else{
								$("#radio2").parent().removeClass("router-link-exact-active");
								$("#radio1").parent().addClass("router-link-exact-active");
							}
							 $("#yqmCode").DataTable().destroy();
							invitationType(type)
				        });
					}else if(data.data==2){
						layer.alert("赔率设置有误,请重新选择赔率")
					}else if(data.data==3){
						layer.alert("赔率大于平台规定的最低赔率")
					}else if(data.data==4){
						layer.alert("试玩账号不能申请成为代理")
					}else if(data.data==5){
						layer.alert("很抱歉，您已经被上级设置成玩家账号不能成为代理")
					}else if(data.data==6){
						layer.alert("信息不能为空")
					}
				},
			}); 
		});
		
		/* 为下级设置账号、类型、返点 */
		$(".openAccountContent .submitBtn").on("click",function(){
			var type=$(".openAccountContent .choosed").attr("data-type");
			var robate=$(".openAccountContent .seradediv span").text();
			var userName=$(".userName").val();
			var password=$(".userPwd").val();
			$.ajax({
				url:"/agencyCenter/openAccount.do", 
				type: "post",
				data:{
					oddss:robate,
					gamePlayer:type,
					name:userName,
					pass:password,
				},
				success:function(data){
					if(data == 50) { 
						save.push("sy");
						bindSetData("login"); 
						return;
		   			}else if(data==60){
		   				pagePreserve();
		   				return;
		   			}
					if(data.data==1){
						layer.confirm('开户成功，是否查看下级？', {
				            btn : [ '确定', '取消' ]
				        }, function(index) {
				            layer.close(index);
				            save.push("agent");
							bindSetData("lowerManage");  
				        });
					}else if(data.data==2){
						layer.alert("赔率设置有误,请重新选择赔率")
					}else if(data.data==3){
						layer.alert("赔率大于平台规定的最低赔率")
					}else if(data.data==4){
						layer.alert("试玩账号不能申请成为代理")
					}else if(data.data==5){
						layer.alert("很抱歉，您已经被上级设置成玩家账号不能成为代理")
					}else if(data.data==6){
						layer.alert("信息不能为空")
					}else if(data.data==7){
						layer.alert(" 已经是玩家账号不能成为代理")
					}
				},
			}); 
		});
		
		
		/* 根据邀请码的开户类型显示邀请码链接数据 */
		function invitationType(type){
			$("#yqmCode").DataTable({
			    "bLengthChange": true,      
			    "bSort": false,
			    "bAutoWidth": false,
			    'aLengthMenu':[5],
			     "searching": false,
			     "dom": `ftp`,
			     "pagingType": "full",
			     "language": {
			          "lengthMenu": "每页显示 _MENU_ 条记录",     
			          "zeroRecords": "没有检索到数据",     
			          "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
			          "info": "没有数据",     
			          "oPaginate": {     
			              "sFirst": "首页",     
			              "sPrevious": "前一页",     
			              "sNext": "后一页",     
			              "sLast": "尾页"    
			        	},
			          "search":"搜索:",
			          "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
			          "infoEmpty":      "没有找到匹配的信息",
			       },
			       "columnDefs": [{"defaultContent": "",
		               "targets": "_all"}],
			       "ajax": {
			      	 "type": "POST",
			      	 "url":"/agencyCenter/pueryProxyLinks.do",
			      	"data": function ( d ) {
				        d.gamePlayer = type;
		   		    },
			      	 "dataSrc": function(json) {
			      		if(json == 50) { 
							save.push("sy");
							bindSetData("login"); 
							return;
			   			}else if(json==60){
			   				pagePreserve();
			   				return;
			   			}
			      		 newData = json.data;
			      			for(i=0;i<newData.length;i++){
				      			 var item=newData[i];
				      			var robate=Number(item.inferiorOdds);
								robate=(robate*100).toFixed(1);
								robate=robate+"%";
				      			 item.content="<div data-v-410b8516='' class='code-list'>"+
									"<div data-v-410b8516='' class='tp'>"+
									"<p data-v-410b8516=''>邀请码：<span data-v-410b8516='' class='code'>"+item.invitationCode+"</span></p><i data-v-410b8516=''>"+GetDateStr(0)+"</i><em data-v-410b8516=''>返点率："+robate+"</em>"+
									"<div data-v-410b8516='' class='defFont del'></div>"+
								"</div>"+
								"<div data-v-410b8516='' class='bot'>"+
									"<div data-v-410b8516='' id='copy_iCode"+i+"' onclick='copyContent(\"#copy_iCode"+i+"\")'>复制邀请码</div>"+
									"<input style='display:none'  value="+item.invitationCode+">"+
									"<div data-v-410b8516=''  id='copy_address"+i+"' onclick='copyContent(\"#copy_address"+i+"\")'>复制注册链接</div>"+
									"<input style='display:none' value="+item.iCode+" id='address"+i+"'>"+
								"</div>"+
							"</div>";
			      		 }
			      			 return newData;
			      	 },
			       },
			       "columns": [
			           { "data": "content","className":"content-td"},
		           ] 
			 	});
		};
		
		/* 删除邀请码 */
		$(".InviteTableBox").on("click",".del",function(){
			var that=this;
			layer.confirm('您确定要删除邀请码吗？', {
	            btn : [ '确定', '取消' ]
	        }, function(index) {
	            layer.close(index);
	            console.log($(that).siblings("p"));
	            var yqCode=$(that).siblings("p").find(".code").text();
				$.ajax({
					url:"/agencyCenter/deleteAgenLink.do", 
					type: "post",
					data:{invitationCode:yqCode},
					success:function(data){
						if(data == 50) { 
							save.push("sy");
							bindSetData("login"); 
							return;
			   			}else if(data==60){
			   				pagePreserve();
			   				return;
			   			}
						if(data.data==1){
							$(that).parents(".code-list").remove();
						}else{
							layer.alert("删除失败")
						}
					},
				}); 
	        }); 
		});

	   /* 复制链接 */
	    function copyContent(nameId){
	         layer.alert("复制成功"); 
	    	   var clipboard = new ClipboardJS(nameId,{
	    		   text: function() {
			               return $(nameId).next().val();
			           }
	    	   }); 
		       clipboard.on('success', function(e) {      
		           e.clearSelection();      
		       });
	    };
	
	
	
</script>